<template>
  <div class="hong">
    <div class="caozuo">
      <el-button type="success" plain @click="addPeople">添加分类</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="名称" prop="name" />
      <el-table-column label="描述" prop="description" />
      <el-table-column label="mid" prop="mid" />
      <el-table-column label="slug" prop="slug" />
      <el-table-column align="right">
        <template #header>
          <el-input
            v-model="search"
            @keyup="searchOne"
            size="small"
            placeholder="Type to search"
          />
        </template>
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >管理</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加课堂分类信息 -->
    <el-drawer v-model="drawer" title="添加课堂分类" :direction="direction">
      <template #default>
        <div class="a">
          <span>名称：</span>
          <el-input type="text" v-model="classInfo.name" />
        </div>
        <div class="a">
          <span>mid：</span>
          <el-input type="text" v-model="classInfo.mid" />
        </div>
        <div class="a">
          <span>slug: </span>
          <el-input type="text" v-model="classInfo.slug" />
        </div>
        <div class="a">
          <span>描述: </span>
          <el-input type="text" v-model="classInfo.description" />
        </div>
      </template>
      <template #footer>
        <!-- <el-button v-if="!changePeoMsg" type="primary" plain @click.stop="submitMsg">提交</el-button> -->
        <el-button type="primary" plain @click.stop="submitMsg">提交</el-button>
        <el-button type="warning" plain>重置</el-button>
      </template>
    </el-drawer>
    <!-- 分页器 -->
    <div class="demo-pagination-block" id="ddp">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :small="true"
        :disabled="false"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
  
  <script setup>
import { ref } from "vue";
import { getFenLei, changeFenlei, delFenlei } from "@/require/index.js";
import { calendarEmits } from "element-plus";
let drawer = ref(false);
const direction = ref("rtl");
let pagenum = ref(1);
let pageSize = ref(6);
let search = ref("");
let tableData = ref([]);
let currentPage = ref(1);
let total = ref(0);
let changePeoMsg = ref(false);
let classInfo = ref({
  description: "描述",
  mid: "00",
  name: "xxxx",
  slug: "xxxx",
});
let { data } = await getFenLei({
  name: "",
  pageNum: pagenum.value,
  pageSize: pageSize.value,
});
tableData.value = data.data.records;
total.value = data.data.total;
// 封装获取最新数据函数
const getValue = async () => {
  let { data } = await getFenLei({
    name: "",
    pageNum: pagenum.value,
    pageSize: pageSize.value,
  });
  tableData.value = data.data.records;
  total.value = data.data.total;
};

// 修改红娘信息
const handleEdit = (a, b) => {
  drawer.value = true;
  changePeoMsg.value = true;
  classInfo.value = JSON.parse(JSON.stringify(b));
};
// 删除课堂
const handleDelete = async (a, b) => {
  let { data } = await delFenlei([b.mid]);
  if (data.code == "200") {
    tableData.value.splice(a, 1);
    getValue();
  }
};
const addPeople = () => {
  drawer.value = true;
};
const submitMsg = async () => {
  let { data } = await changeFenlei({
    ...classInfo.value,
  });
  if (data.code == "200") {
    getValue();
  }
};

// 分页页树改变
const handleSizeChange = (value) => {
  console.log(value);
};

// 分页页数改变
const handleCurrentChange = (value) => {
  pagenum.value = value;
  getValue();
};

// 搜索功能（防抖函数）
function debounce(fn) {
  let timer;
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn();
    }, 1000);
  };
}

const check = async () => {
  let { data } = await getFenLei({
    name: search.value,
    pageNum: pagenum.value,
    pageSize: pageSize.value,
  });
  tableData.value = data.data.records;
  total.value = data.data.total;
};
let checkResult = debounce(check);
let arr = [8, 37, 39, 20];
const searchOne = (e) => {
  if (arr.indexOf(e.keyCode) == -1) {
    checkResult();
  }
};
</script>
  <style scoped lang="less">
.avatar-uploader {
  width: 50px;
  height: 50px;
  .avatar-uploader-icon {
    width: 50px;
    height: 50px;
  }
  img {
    width: 100%;
  }
}

.head {
  display: flex;
  height: 60px;
  align-items: center;
}

.a {
  margin-top: 20px;
  display: flex;
  align-items: center;
  span {
    width: 60px;
  }
}

#intr {
  .el-input__inner {
    width: 100px;
    height: 200px;
    overflow: auto;
  }
}

#jieshao {
  overflow: hidden;
  text-overflow: ellipsis;
  /* 将对象作为弹性伸缩盒子模型显示 */
  display: -webkit-box;
  /* 限制在一个块元素显示的文本的行数 */
  /* -webkit-line-clamp 其实是一个不规范属性，使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；*/
  -webkit-line-clamp: 2;
  /* 设置或检索伸缩盒对象的子元素的排列方式 */
  -webkit-box-orient: vertical;
}
#ddp {
  position: absolute;
  bottom: 10px;
  left: 50%;
  // transform: translateX(-50%);
}
</style>